<template>
    <div class="Sendcode">
        <!--       公共顶部-->
        <Top>
            <i class="el-icon-arrow-left back" slot="leftPart" @click="goback()"></i>
            <p class="title" slot="midPart">找回密码</p>
        </Top>
        <!---->
        <div class="login-form">
            <!--手机-->
            <div class="mobile" :class="{on:light}">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-tel"></use>
                </svg>
                <input type="number" placeholder="请输入手机号" v-model="mobile" oninput="if(value.length>11)value=value.slice(0,11)" @focus="light=true" @blur="light=false" />
            </div>
            <!--验证码-->
            <div class="code" :class="{on:light2}">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-codee"></use>
                </svg>
                <input type="text" placeholder="请输入验证码" v-model="code" @focus="light2=true" @blur="light2=false" />
                <span v-if="codeReady" class="reqBtn" @click="requsetCode">获取验证码</span>
                <span v-else class="reqBtn" @click="requsetCode">重新发送（ {{codeTime}}s ）</span>
            </div>
            <!--密码-->
            <div class="pwd" :class="{on:light3}">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon"></use>
                </svg>
                <input type="password" placeholder="请输入6-16位密码" v-model="password" @focus="light3=true" @blur="light3=false" />
            </div>
            <!--重复密码-->
            <div class="pwd" :class="{on:light4}">
                <svg class="icon" aria-hidden="true">
                    <use xlink:href="#icon-icon"></use>
                </svg>
                <input type="password" placeholder="请重复密码" v-model="repeatPwd" @focus="light4=true" @blur="light4=false" />
            </div>
            <!--确认-->
            <div class="confirm">
                <el-button :class="{on:regBtnState}" type="primary" :disabled="regBtnState" @click="confirm"><img v-if="regBtnState" src="../../assets/login/reLoading.svg" alt="" class="regLoading">{{regBtnText}}</el-button>
            </div>
        </div>
    </div>
</template>

<script>
    import Top from '@/components/smallCom/Top'
    export default {
        name: 'Sendcode',
        components: {
            Top,//顶部信息组件
        },
        data () {
            return {
                light:false,//
                light2:false,//
                light3:false,//
                light4:false,//

                mobile:'',//注册手机号
                code:'',//验证码
                password:'',//密码
                repeatPwd:'',//重复密码

                codeReady:true,//是否可以点击获取验证码
                codeTime:60,//验证码时效

                regBtnState:false,//注册按钮状态
                regBtnText:'确定',//注册按钮状态
            }
        },
        methods:{
            //获取验证码
            requsetCode(){
                if(!this.codeReady)return;
                //ajax
                this.Posthttp('/?method=flower.login.sendPasswordSms',{mobile:this.mobile},(res)=>{
                    if(JSON.parse(res.bodyText).status == 1){
                        this.codeReady = false;
                        this.$message.success('发送成功！');
                        this.codeTimer();
                    }else{
                        this.codeReady = true;
                        this.$message.warning(JSON.parse(res.bodyText).msg); 
                    }
                });
            },
            //验证码时效倒计时
            codeTimer(){
                let timer = setInterval(()=>{ 
                    if(this.codeTime<2){
                        this.codeReady = true;
                        this.codeTime=60;//重新复原时效
                        clearInterval(timer);
                    }else{
                        this.codeTime--;
                    }
                }, 1000);  
            },
            //确定
            confirm(){
                //提交前验证
                if(!this.mobile||!this.password||!this.repeatPwd||!this.code){
                    this.$message.warning('请完善表单！亲~');
                    return;   
                }
                if(this.password != this.repeatPwd){
                    this.$message.warning('两次密码不一致！亲~');
                    return;
                };
                this.regBtnState=true;
                this.regBtnText='';
                //ajax
                this.Posthttp('/?method=flower.login.resetPassword',{mobile:this.mobile,password:this.password,code:this.code},(res)=>{
                    if(JSON.parse(res.bodyText).status == 1){
                        this.regBtnState = false;
                        this.regBtnText = '确定';
                        this.$message.success('成功找回密码~请重新登录');
                        this.$router.replace('/login');
                    }else{
                        this.regBtnState = false;
                        this.regBtnText = '确定';
                        this.$message.warning(JSON.parse(res.bodyText).msg); 
                    }
                });
            },
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    $tColor: #333;/*基础文字色号*/
    .Sendcode{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        .login-form{
            width: 80%;
            margin: 1.6rem auto 0;
            padding-bottom: .4rem;
            color: #333;
            .icon{
                position: absolute;
                left: 0;
                color: #d95627;
                font-size: .3rem;
                top: calc(50% - .15rem);
            }
            input{
                width: 100%;
                height: 100%;
                border: 0;
                padding-left: .45rem;
                outline: 0;
                font-size: .28rem;
                color: #333;
                font-weight: 600;
                background: transparent;
                &::placeholder{
                    color: #999;
                }
            }
            .mobile{
                position: relative;
                height: .8rem;
                border-bottom: 1px solid #e4e4e4;
                &::after{
                    display: block;
                    width: 0;
                    height: 1px;
                    content: '';
                    position: absolute;
                    left: 0;
                    bottom: 0;
                    transition: all .4s;   
                }
                &.on{
                    border-bottom: 1px solid transparent;  
                }
                &.on::after{
                    width: 100%;
                    background: #d95627;
                }
            }
            .code{
                @extend .mobile;
                margin-top: .6rem;
                position: relative;
                input{
                    width: 50%;
                }
                .reqBtn{
                    position: absolute;
                    right: 0;
                    height: .8rem;
                    line-height: .8rem;
                    color: #d95627;
                    font-size: .26rem;
                }
            }
            .pwd{
                @extend .mobile;
                margin-top: .6rem;
            }
            /*立即注册按钮*/
            .confirm{
                outline: none;
                margin-top: .8rem;
                border-radius: .4rem;
                overflow: hidden;
                text-align: center;
                button{
                    position: relative;
                    width: 100%;
                    height: .8rem;
                    border-radius: .4rem;
                    letter-spacing: 1px;
                    outline: none;
                    background: #d95627;
                    color: #fff;
                    font-size: .28rem;
                    text-align: center;
                    transition: all .4s;
                    &.on{
                        width: .8rem;
                        height: .8rem;
                        border-radius: 100%;
                    }
                    .regLoading{
                        position: absolute;
                        width: .6rem;
                        height: .6rem;
                        left: calc(50% - .3rem);
                        top: calc(50% - .3rem);
                    }
                }
            }

        }
    }
</style>
